<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="活动详情"></head-title>
		<scroll-view scroll-y :style="{height: windowH+'px'}">
			<view v-if="msg!=''" class="cont">
				<view class="flex_row userCont">
					<view @tap="bindUser(msg.item_arr.user_id)" class="headPic">
						<image :src="msg.item_arr.avatarurl" mode="aspectFill"></image>
					</view>
					<view class="userMsg flex_row">
						<view>
							<view class="userName flex_row">
								<text>{{msg.item_arr.nickname}}</text>
								<image v-if="msg.item_arr.gender==1" src="../../static/image/man.png" mode="aspectFill"></image>
								<image v-else src="../../static/image/woman.png" mode="aspectFill"></image>
							</view>
							<view v-if="freeStyle==1" class="rang">
								<text>距离 {{msg.juli_str}}</text>
							</view>
						</view>
						<view class="flex_col userRight">
							<view class="buy">{{msg.item_arr.h_money_item}}</view>
						</view>
					</view>
				</view>
				<view class="actCont">
					<view class="actTitle flex_row">
						<image :src="msg.class_img" mode=""></image>
						<text>{{msg.item_arr.h_title}}</text>
					</view>
					<view class="actText">
						<text selectable="true">{{msg.item_arr.h_profile}}</text>
					</view>
					<view class="actImg flex_row" :class="{one:msg.item_img_arr.length==1}">
						<image @tap="lookImg(item.c_img)" v-for="(item,index) in msg.item_img_arr" :key="index" :src="item.c_img" mode="aspectFill"></image>
					</view>
				</view>
				<view class="lists">
					<view v-if="msg.item_arr.lu_type==2" class="travel">
						<view class="actList travelTime">
							<view class="flex_row">
								<image src="../../static/image/lianjie.png" mode="aspectFit"></image>
								<view class="flex_col">
									<text>出发时间：{{msg.item_arr.h_time_str}}</text>
									<text>预计时间：{{msg.item_arr.lu_yue_time}}</text>
								</view>
							</view>
						</view>
						<view class="actList actTime">
							<view class="flex_row">
								<image src="../../static/image/dizhi.png" mode=""></image>
								<text>出行方式：{{msg.item_arr.lu_go_style}}</text>
							</view>
						</view>
						<!-- <view class="actList actAddress">
							<view class="flex_row">
								<image src="../../static/image/pay.png" mode=""></image>
								<text>旅行费用：承担对方3000元以下的费用</text>
							</view>
						</view> -->
					</view>
					<view v-else class="other">
						<view class="actList actTime">
							<view class="flex_row">
								<image src="../../static/image/time.png" mode=""></image>
								<text>活动时间：{{msg.item_arr.h_time_str}}</text>
							</view>
						</view>
						<view class="actList actAddress">
							<view class="flex_row">
								<image src="../../static/image/dizhi.png" mode=""></image>
								<text>活动地点：{{msg.item_arr.h_areaitem}}</text>
							</view>
						</view>
					</view>
					<view class="label flex_row">
						<view v-if="msg.item_arr.h_sex_str!=''">
							<text v-if="msg.item_arr.lu_type==2">只限{{msg.item_arr.h_sex_str}}</text>
							<text v-else>{{msg.item_arr.h_sex_str}}</text>
						</view>
						<view v-if="msg.item_arr.h_money_item!=''">{{msg.item_arr.h_money_item}}</view>
						<view v-if="msg.item_arr.h_song!=''">{{msg.item_arr.h_song}}</view>
					</view>
					<view v-if="msg.is_me!=1" @tap.stop="bindReport(msg.item_arr.id)" class="report">举报</view>
				</view>
				<view v-if="msg.is_me!=1" class="btn flex_row">
					<view @tap="bindLike" v-if="msg.is_show_me_happy==1" class="btnActive flex_row">
						<image src="../../static/image/like.png" mode="aspectFill"></image>
						<text>我感兴趣</text>
					</view>
					<view @tap="bindGift" class="btnActive active flex_row">
						<image src="../../static/image/liwu.png" mode="aspectFill"></image>
						<text>带礼物报名</text>
					</view>
				</view>
				<view v-else class="btn flex_row">
					<view @tap="bindDel" class="btnActive active flex_row">
						<text>删除该活动</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '',actid = '';
	export default {
		components:{headTitle},
		data(){
			return{
				travel:true,food:false,
				windowH:0,
				imgList:[
					"http://t2.hddhhn.com/uploads/tu/201612/368/rdwb4pnmopu.jpg",
					"http://t2.hddhhn.com/uploads/tu/20150410/eh5ugyw5tgx.jpg",
					"http://t2.hddhhn.com/uploads/tu/20150410/3pclo0za10r.jpg"
				],
				msg:'',freeStyle:''
			}
		},
		onLoad:function(options){
			var that = this;
			if(options.session!=undefined){
				session = options.session;
				actid = options.actid;
				that.getMsg();
			}
			common.network.getHeight(function(h,w,bar){
				var topH = parseInt((bar+118))
				that.windowH = h - w/750 * topH;
				uni.getStorage({
					key: 'free_style',
					success:function(res){
						that.freeStyle  = res.data;
					}
				})
			})
		},
		methods:{
			bindReport:function(id){
				uni.navigateTo({
					url:"/pagesA/report/report?session="+session+"&ac_id="+id
				})
			},
			bindDel:function(){
				var that = this;
				uni.showModal({
					content: '确认删除该活动吗？',
					confirmColor:'#6278FF',
					success:function(res){
						if(res.confirm){
							var $data = {
								'type': 'zac_del_ac',
								'session':session,
								'id':actid
							}
							common.network.request($data,function(res){
								uni.setStorage({
									key: 'delAct',
									data: 1,
									success:function(){
										uni.showToast({
											icon: 'success',
											title: '删除成功',
											success:function(){
												setTimeout(function(){
													uni.navigateBack({
														
													})
												},1500)
											}
										})
									}
								})
							})
						}
					}
				})
				
				
			},
			bindUser:function(id){
				uni.navigateTo({
					url: "/pagesA/userInfo/userInfo?userid="+id+"&session="+session
				})
			},
			lookImg:function(url){
				var that = this;
				var arr = that.msg.item_img_arr;
				var $urls = [];
				for(var i=0;i<arr.length;i++){
					$urls.push(arr[i].c_img);
				}
				uni.previewImage({
					current:url,
					urls:$urls
				})
			},
			getMsg:function(){
				var that = this;
				var $data = {
					'type':'zac_ac_item',
					'session':session,
					'id':actid
				};
				common.network.request($data,function(res){
					console.log(res);
					that.msg = res;
				})
			},
			bindGift:function(){
				var userid = this.msg.item_arr.user_id;
				uni.navigateTo({
					url: "/pagesA/giftList/giftList?session="+session+"&userid="+userid+"&actid="+actid
				})
			},
			bindLike:function(){
				var that = this;
				var userid = this.msg.item_arr.user_id;
				var $data = {
					'type':'zac_me_happy',
					'session':session,
					'id':actid
				};
				common.network.request($data,function(res){
					console.log(res);
					uni.navigateTo({
						url: "/pagesA/chat/chat?session="+session+"&userid="+userid
					})
				})
				
				
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		/* border: 1px solid #FF3C30; */
		background: #F8F8F8;
	}
	
	.userCont{
		padding: 30px;
		padding-bottom: 28px;
		background: #fff;
	}
	.headPic{
		width: 94px;
		height: 94px;
		margin-right: 20px;
		min-width: 94px;
	}
	.headPic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.userMsg{
		width: 582px;
		justify-content: space-between;
	}
	.userName,.buy{
		padding-bottom: 8px;
	}
	.userRight{
		align-items: flex-end;
	}
	.buy{
		color: #EF272A;
		font-size: 28px;
	}
	.rang{
		font-size: 26px;
		color: #8B8B8B;
	}
	.actCont{
		padding: 0 30px;
		background: #fff;
	}
	.lists{
		padding: 0 30px;
		padding-bottom: 40px;
		background: #fff;
		margin-top: 16px;
		position: relative;
	}
	.report{
		color: #6673FF;
		width: 90px;
		text-align: right;
		font-size: 24px;
		position: absolute;
		bottom: 10px;
		right: 20px;
	}
	.actTitle{
		font-size: 32px;
		font-weight: bold;
		padding-bottom: 16px;
	}
	.actTitle image{
		width: 42px;
		height: 42px;
		margin-right: 14px;
	}
	.actText{
		font-size: 28px;
		color: #8B8B8B;
		line-height: 44px;
		text-indent: 1.5em;
		word-break: break-all;
		text-align: justify;
	}
	.actImg{
		flex-wrap: nowrap;
		padding-top: 20px;
		padding-bottom: 40px;
	}
	.actImg.one image{
		width: 100%;
		height: 350px;
	}
	.actImg image{
		width: 32%;
		height: 200px;
		border-radius: 8px;
		margin-right: 2%;
	}
	.actImg image:last-of-type{
		margin-right: 0;
	}
	.actList{
		padding: 20px 0;
		border-bottom: 1px solid #F8F8F8;
	}
	.actList:last-of-type{
		border-bottom: none;
	}
	.actList.travelTime text:first-of-type{
		margin-bottom: 6px;
	}
	.actList.travelTime image{
		width: 32px;
		height: 74px;
	}
	.actList view{
		align-items: flex-start;
	}
	.actList image{
		min-width: 32px;
		width: 32px;
		height: 32px;
		margin-right: 18px;
		position: relative;
		top: 6px;
	}
	.actList text{
		line-height: 46px;
	}
	.actList:last-of-type{
		border-bottom: none;
	}
	.label{
		padding-left: 52px;
		padding-top: 10px;
	}
	.label view{
		background: #FF7676;
		color: #fff;
		font-size: 26px;
		padding: 5px 12px;
		border-radius: 6px;
		margin-right: 26px;
		box-shadow: 0 0 4px #FF7676;
	}
	.label view:nth-of-type(2){
		background: #31A0E5;
		box-shadow: 0 0 4px #31A0E5;
	}
	.label view:last-of-type{
		margin-right: 0;
		background: #04C11F;
		box-shadow: 0 0 4px #04C11F;
	}
	.btn{
		width: 90%;
		margin: auto;
		margin-top: 80px;
		padding-bottom: 100px;
		justify-content: space-around;
	}
	.btn view{
		width: 44%;
		border-radius: 100px;
		padding: 18px 0;
		border: 1px solid #6673FF;
		box-shadow: 0 0 10px rgba(102,115,255,0.4);
		color: #6673FF;
		justify-content: center;
		font-size: 32px;
	}
	.btn image{
		width: 36px;
		height: 36px;
		margin-right: 20px;
	}
	.btn .active{
		background: #6673FF;
		color: #fff;
	}
</style>
